	<script>
		function editNode(){
			var node = $('#tt').treegrid('getSelected');
			if (node){
				$('#tt').treegrid('beginEdit',node.id);
			}
		}
		function saveNode(){
			var node = $('#tt').treegrid('getSelected');
			if (node){
				$('#tt').treegrid('endEdit',node.id);
			}
		}
		function cancelNode(){
			var node = $('#tt').treegrid('getSelected');
			if (node){
				$('#tt').treegrid('cancelEdit',node.id);
			}
		}
	</script>

	<h2>带分页的树形数据表格 - Editable TreeGrid Pagination</h2>
	<div class="demo-info">
	  <div class="demo-tip icon-tip"></div>
		<div>选择节点并单击edit按钮来执行编辑。		</div>
	</div>
	
	<div style="margin:10px 0">
		<a href="javascript:editNode()" class="easyui-linkbutton">Edit</a>
		<a href="javascript:saveNode()" class="easyui-linkbutton">Save</a>
		<a href="javascript:cancelNode()" class="easyui-linkbutton">Cancel</a>
	</div>
	
	<table id="tt" title="TreeGrid" class="easyui-treegrid" style="width:700px;height:300px"
			data-options="url:'documentation/treegrid_data3.json',idField:'id',treeField:'code',
					rownumbers:true,pagination:true,fitColumns:true,autoRowHeight:false">
		<thead>
			<tr>
				<th data-options="field:'code',editor:'text'" rowspan="2" width="150">Code</th>
				<th colspan="2">Group Fields</th>
			</tr>
			<tr>
				<th data-options="field:'name',editor:'text'" width="200">Name</th>
				<th data-options="field:'addr',editor:'text'" width="200">Addr</th>
			</tr>
		</thead>
	</table>
	
<<h3>页面代码： </h3>
<pre name="code" class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
	&lt;title&gt;Editable TreeGrid - jQuery EasyUI Demo&lt;/title&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/default/easyui.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/icon.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;demo.css&quot;&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.easyui.min.js&quot;&gt;&lt;/script&gt;
	&lt;script&gt;
		function editNode(){
			var node = $('#tt').treegrid('getSelected');
			if (node){
				$('#tt').treegrid('beginEdit',node.id);
			}
		}
		function saveNode(){
			var node = $('#tt').treegrid('getSelected');
			if (node){
				$('#tt').treegrid('endEdit',node.id);
			}
		}
		function cancelNode(){
			var node = $('#tt').treegrid('getSelected');
			if (node){
				$('#tt').treegrid('cancelEdit',node.id);
			}
		}
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;h2&gt;带分页的树形数据表格 - Editable TreeGrid Pagination&lt;/h2&gt;
	&lt;div class=&quot;demo-info&quot;&gt;
	  &lt;div class=&quot;demo-tip icon-tip&quot;&gt;&lt;/div&gt;
		&lt;div&gt;选择节点并单击edit按钮来执行编辑。		&lt;/div&gt;
	&lt;/div&gt;
	
	&lt;div style=&quot;margin:10px 0&quot;&gt;
		&lt;a href=&quot;javascript:editNode()&quot; class=&quot;easyui-linkbutton&quot;&gt;Edit&lt;/a&gt;
		&lt;a href=&quot;javascript:saveNode()&quot; class=&quot;easyui-linkbutton&quot;&gt;Save&lt;/a&gt;
		&lt;a href=&quot;javascript:cancelNode()&quot; class=&quot;easyui-linkbutton&quot;&gt;Cancel&lt;/a&gt;
	&lt;/div&gt;
	
	&lt;table id=&quot;tt&quot; title=&quot;TreeGrid&quot; class=&quot;easyui-treegrid&quot; style=&quot;width:700px;height:300px&quot;
			data-options=&quot;url:'treegrid_data3.json',idField:'id',treeField:'code',
					rownumbers:true,pagination:true,fitColumns:true,autoRowHeight:false&quot;&gt;
		&lt;thead&gt;
			&lt;tr&gt;
				&lt;th data-options=&quot;field:'code',editor:'text'&quot; rowspan=&quot;2&quot; width=&quot;150&quot;&gt;Code&lt;/th&gt;
				&lt;th colspan=&quot;2&quot;&gt;Group Fields&lt;/th&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;th data-options=&quot;field:'name',editor:'text'&quot; width=&quot;200&quot;&gt;Name&lt;/th&gt;
				&lt;th data-options=&quot;field:'addr',editor:'text'&quot; width=&quot;200&quot;&gt;Addr&lt;/th&gt;
			&lt;/tr&gt;
		&lt;/thead&gt;
	&lt;/table&gt;
	
&lt;/body&gt;
&lt;/html&gt;</pre>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>